<template>
  <div>
    <a-icon type="caret-left"  slot="prefix" @click="sub"/>
    <a-input-number
      :value="number"
      :min="min"
      :max="max"
      :formatter="value => `${value}%`"
      :parser="value => value.replace('%', '')"
      :style="{width}"
      
      :isOnChangeQZ='isOnChangeQZ'
      @change="change"
      @focus='getblur'
      :eventType='type'
    />
    <a-icon type="caret-right"  slot="suffix" @click="add"/>
  </div>
</template>

<script>
  export default {
    props: [ 'value','width','disabled','type','max','isOnChangeQZ'],
    inject:["instance"],
    data () {
      return {
        // max:100,
        min:0,
        number: 0
      }
    },
    watch:{
      value:{
        handler(val){
          this.number = parseFloat(val);
        },
        immediate: true
      },
      isOnChangeQZ(val){
       
        if(val&&this.number==0){
          
          this.disabled=false
        }
      },
      number(val){
        // if (this.number > this.max) this.number = this.max;
        // if (this.number < this.min) this.number = this.min;
        this.$emit("input",val);
      }
    },
    mounted(){
  
    },
    methods: {
      change(val){
        
         if(!val)val=0;
         
         
         this.number = val;
        this.$emit("input",val);
        this.instance.isUserCustom = true;
      },
      sub(){
   
        if ((this.number-1) >= this.min){
          this.$emit('getType',this.type)
          this.number = parseFloat(this.number-1).toFixed(2);
          this.instance.isUserCustom = true;
        }
      },
      add(){
         
      
        if ((this.number+1) <= this.max){
           this.$emit('getType',this.type)
          this.number =  parseFloat(this.number+1).toFixed(2);
          this.instance.isUserCustom = true;
        }
      },
      getblur(e){
        console.log(this.type)
        this.$emit('getType',this.type)
      }
    
    }
  }
</script>
<style scoped>
  .text{text-align: center;}
</style>
